<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>精灵图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			.box {
				width: 200px;
				/*background-color: purple;*/
				margin: 50px auto;
			}
			.box ul {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				width: 100%;
				font-size: 12px;
				
			}
			.box li{
				width: 50px;
				height: 70px;
				padding: 10px;
				/*background-color: pink;*/
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				cursor: pointer;
			}
			.box li .img_box {
				width: 24px;
				height: 24px;
				background: url(img/sprite.png) no-repeat center top;
				background-position: 0 0;
				background-size: 24px auto;
				
			}
			.box li p {
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				<li>
					<div class="img_box">
						
					</div>
					<p>商城</p>
				</li>
				
			</ul>
		</div>
		
		<script type="text/javascript">
			//获取每个li 里面的imgbox
			var imgs = document.querySelectorAll('.img_box');
			for(var i = 0;i < imgs.length; i++) {
				var index = i * 44;
				imgs[i].style.backgroundPosition ='0 -' + index + 'px';
			}
				//修改p标签里面的内容
			var pEle = document.querySelectorAll('p');
			for(var i = 0; i < pEle.length; i++) {
				pEle[i].innerHTML = '商城' + (i + 1);
			}
			
			

		</script>
	</body>
</html>
